<!doctype html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <title>飞马云监控登录</title>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: PingFangSC-Regular, Microsoft YaHei, sans-serif;
            cursor: default;
        }

        .font-ulight {
            font-family: PingFangSC-Ultralight, Microsoft YaHei, sans-serif;
        }

        .font-medium {
            font-family: PingFangSC-Medium, Microsoft YaHei, sans-serif;
        }

        .font-bold {
            font-family: PingFangSC-Semibold, Microsoft YaHei, sans-serif;
        }

        #jparticle-container {
            width: 100%;
            height: 100%;
        }

        p {
            margin: 0;
        }

        .content-wrap {
            width: 400px;
            height: 436px;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
        }

        .content-wrap .input-wrap {
            width: 100%;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-radius: 8px;
        }

        .content-wrap .input-wrap table {
            width: 88%;
            text-align: center;
            margin: 16px auto 0 auto;
            font-size: 13px;
        }

        .content-wrap .input-wrap table input.text {
            width: 90%;
            height: 42px;
            font-size: 12px;
            padding: 0 12px;
            border: 1px solid #25b8ff;
            border-radius: 4px;
            box-shadow: 3px 2px 4px 0 rgba(96, 217, 255, 0.50);
            outline-color: #25b8ff;
        }

        .content-wrap .input-wrap table #remember-pwd-label {
            position: relative;
            left: -18px;
        }

        .content-wrap .input-wrap table input[type="checkbox"] {
            opacity: 0.01;
        }

        .content-wrap .input-wrap table input[type="checkbox"] + label::before {
            content: url(/images/check_box.svg);
            position: relative;
            top: 8px;
        }

        .content-wrap .input-wrap table input[type="checkbox"]:checked + label::before {
            content: url(/images/check_box_selected.svg);
        }

        .content-wrap .input-wrap table .btn {
            color: #a6a6a6;
            padding: 0 12px;
        }

        .content-wrap .input-wrap table .selected {
            color: #090909;
        }

        .content-wrap .input-wrap table .content-left {
            text-align: left;
        }

        .content-wrap .input-wrap table .content-right {
            text-align: right;
        }

        .content-wrap .input-wrap table .login {
            width: 122px;
            height: 30px;
            border-radius: 5px;
            background-color: #25b8ff;
            position: absolute;
            right: 10px;
            top: 0;
            border: 0;
            color: white;
            font-size: 14px;
            outline: none;
        }

        .content-wrap .input-wrap table .login:hover {
            opacity: 0.8
        }

        .content-wrap .copy-right {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            text-align: center;
            font-size: 12px;
            color: #f6f6f6;
        }

    </style>
</head>

<!-- 页面 -->
<body>
<!-- 粒子效果 -->
<div id='jparticle-container'></div>

<!-- 内容 -->
<div class="content-wrap">
    <div class="input-wrap">
        <form>
            <table>
                <tr>
                    <td colspan="2"><img src="/images/logo.svg"></td>
                </tr>
                <tr>
                    <td colspan="2" style="font-size: 24px;" class="font-medium">云监控<span class="font-ulight">平台</span>
                    </td>
                </tr>
                <tr>
                    <td style="height: 16px;">&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="2"><input class="text" type="text" id="phone" name="phone" placeholder="手机号"></td>
                </tr>
                <tr>
                    <td style="height: 16px;"><p id="error_phone_msg"
                                                 style="margin-left: 12px; color: red;text-align: left;visibility: hidden;"></p>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"><input class="text" id="password" type="password" name="password" placeholder="密码">
                    </td>
                </tr>
                <tr>
                    <td style="height: 16px;"><p id="error_password_msg"
                                                 style="margin-left: 12px; color: red;text-align: left;visibility: hidden;"></p>
                    </td>
                </tr>
                <tr>
                    <td class="btn content-left"><input id="remember-pwd" type="checkbox" name="remember-pwd"
                                                        value="remember" checked><label id="remember-pwd-label"
                                                                                        for="remember-pwd">记住密码</label>
                    </td>
                    <td class="btn content-right" style="position: relative;">
                        <input class="login" type="button" onclick="clickLogin()" value="登   录">

                    </td>
                </tr>
                <tr>
                    <td style="height: 30px;">&nbsp;

                    </td>
                    <td>

                    </td>
                </tr>
                <tr>
                    <td class="btn content-left">系统帮助</td>
                    <td class="btn content-right selected">系统支持</td>
                </tr>
            </table>
        </form>
    </div>

    <p class="copy-right font-bold">2017 Copyright Desgin by Feimaroictices</p>
</div>

</body>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/validator.min.js"></script>
<script src="/js/jparticle.jquery.min.js"></script>
<script src="/js/vendor/particle-bg.js"></script>

<script>
    var isPhoneCheckRight = true;
    var isPasswordCheckRight = true;
    var phoneInput = $("#phone");
    var passwordInput = $("#password");
    var errorPhoneMsg = $("#error_phone_msg");
    var errorPasswordMsg = $("#error_password_msg");
    function validtorPassword() {
        var password = passwordInput.val();
        if (password.length < 6) {
            errorPasswordMsg.text("密码长度小于6位");
            errorPasswordMsg.css("visibility", "visible");
            isPasswordCheckRight = false;
        } else {
            isPasswordCheckRight = true;
            errorPasswordMsg.css("visibility", "hidden");
        }
        return password;
    }
    function validatorPhone() {
        var phone = phoneInput.val();
        if (!validator.isMobilePhone(phone, 'zh-CN')) {
            errorPhoneMsg.text("电话号码格式不正确");
            errorPhoneMsg.css("visibility", "visible");
            isPhoneCheckRight = false;

        } else {
            isPhoneCheckRight = true;
            errorPhoneMsg.css("visibility", "hidden");
        }
        return phone;

    }

    //绑定change事件
    phoneInput.change(function () {
        validatorPhone();
    });

    passwordInput.change(function () {
        validtorPassword();
    });

    function clickLogin() {
        var phone = validatorPhone();
        var password = validtorPassword();
        if (isPhoneCheckRight && isPasswordCheckRight) {


            $.post("/user/doLogin", {
                "phone": phone,
                "password": password
            }, function (result) {
                alert(result.status + ",消息" + result.message);

            });
        }

    }

</script>
</html>






